Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement (Voices That Matter) by Aaron Gustafson

Author:Aaron Gustafson [Gustafson, Aaron]
Language: eng
Format: azw3
Publisher: Pearson Education
Published: 2015-11-21T05:00:00+00:00

@media (max-width: 600px) {

/* Adjustments for small screens */

}

@media (max-width: 400px) {

/* Adjustments for even smaller screens */

}

@media (min-width: 1300px) {

/* Adjustments for larger screens */

}

The max-width media query (max-width: 600px) is the CSS equivalent of saying if the browser’s width is less than or equal to 600px, apply these style rules. The min-width media query (min-width: 1300px) says the opposite: If the browser’s width is greater than or equal to 1300px, apply these style rules.

Both of these approaches are completely valid, but, a short while later, it was generally agreed that min-width media queries are the better way to go for your overall design because they are more efficient. They are more efficient because you end up writing less CSS when you are starting with a baseline and building up the design because you have more screen real estate. With the other approach, you end up writing a bunch of style rules for your large screen layout that you then have to override in order to apply the narrower design.

Let’s look at a quick example to demonstrate the difference. Consider the following markup:

<div class="primary"></div>

<div class="secondary"></div>

Let’s say I wanted the two div elements to stack on top of one another on a small screen but to sit side by side on a wider screen. If I consider the small screen first, I could simply say the following:

@media (min-width:600px) {

.primary {

float: left;

width: 68%;

}

.secondary {

float: right;

width: 32%;

}

}

This approach is sometimes referred to as mobile first, though with the advent of smart watches and other similarly tiny screens (that aren’t necessarily mobile), I prefer the broader term small screen first. By contrast, if I wanted to get the same result but considered the large screen first—formerly desktop first—I would have to write this:

.primary {

float: left;

width: 68%;

}

.secondary {

float: right;

width: 32%;

}

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.